 <!-- 首页 -->
<template >

    <div class="el-row container" >
      
<!-- 头部 -->
        <div class="header">
            <i class="iconfont icon-logo- logoicon" v-once></i>
            <div class="userset" @click="showuserinfo">
                <i class="iconfont icon-yonghu usericon ">
                </i>
                <br/> {{name}}
            </div>

            <div class="setlist" v-show="userinfo" @click.stop="stop">
                <div @click.stop="showpasswordchanger">
                    <span>修改密码</span>
                    <i class="iconfont icon-yaochi userseticon"></i>
                </div>
                <div @click.stop="loginout">
                    <span>退出</span>
                    <i class="iconfont icon-guanbi userseticon"></i>
                </div>
            </div>
        </div>
<!-- 菜单部分 -->
        <div class="mycontent">
            <div class="menu el-col el-col-3 "  v-once>
                <el-menu :default-active="activeName" :unique-opened='true' :router='true'  class="el-menu-vertical-demo menupadding" >
                    <el-submenu :index="item.name" :key="index" v-for="(item,index) in menuList" >
                        <template slot="title">{{item.name}}</template>
                        <el-menu-item :index="itemcontent.url+''" :route="getObjet(itemcontent.url)" :key="itemcontent.name" v-for="itemcontent in item.content">
                          {{itemcontent.name}}
                          </el-menu-item>
                    </el-submenu>

                </el-menu>
            </div>
            <!-- 内容部分 -->
            <div class="content el-col el-col-22" v-loading.body="loading" element-loading-text="拼命加载中">
                <el-card class="box-card">
                    <keep-alive>
                        <router-view class="right-content" v-if="!$route.meta.keepAlive"></router-view>
                    </keep-alive>
                    <router-view v-if="$route.meta.keepAlive" class="right-content"></router-view>
                </el-card>
            </div>
        </div>
        <!-- 密码修改 弹窗框 -->
        <el-dialog title="密码修改" size="tiny" :visible.sync="passwordchanger"  style="z-index:9"  @close="closeDialoger">
            <el-form :model="form" :label-width="formLabelWidth">
                <el-form-item label="原密码">
                    <el-input v-model="form.ADMIN_PASSWORD" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="新密码">
                    <el-input v-model="form.ADMIN_NEWPASSWORD" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="确认密码">
                    <el-input v-model="form.ADMIN_NEWPASSWORD1" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="passwordchanger = false">取 消</el-button>
                <el-button type="primary" @click="passwordChanger">确 定</el-button>
            </div>
        </el-dialog>
<!-- 底部 -->
        <div class="el-col-24 footer" v-once>
            copyright © 2017 北京力众华援技术服务有限公司 版权所有
        </div>
    </div>

</template>

<script>
import { mapState } from "vuex";
import "@/css/iconfont.css";
import menu from "@/js/menu";
import api from "@/js/api";
export default {
  data() {
    return {
      activeName: "report",
      passwordchanger: false,
      userinfo: false,
      form: {
        ADMIN_PASSWORD: "",
        ADMIN_NEWPASSWORD: "",
        ADMIN_NEWPASSWORD1: ""
      },
      name: "", //用户名
      formLabelWidth: "120px",
      menuList: []
    };
  },
  computed: mapState({
    // 箭头函数可使代码更简练
    loading: "loading",
    loadingtext: "loadingtext"
  }),

  methods: {
    handleClick(tab, event) {
      this.$router.push({
        name: this.activeName
      });
    },
    getObjet(url) {
      var obj = this.$router.options.routes[1].children;
      for (var i = 0; i < obj.length; i++) {
        if (obj[i].name == url) {
          return obj[i];
        }
      }
    },
    showuserinfo() {
      if (!this.userinfo) {
        this.userinfo = true;
      }
    },
    //修改密码界面
    showpasswordchanger() {
      // mousedown
      this.passwordchanger = true;
    },
    //登出
    loginout() {
    api.LoginOut(this);    
    },
    closeDialoger() {
      this.form = {
        ADMIN_PASSWORD: "",
        ADMIN_NEWPASSWORD: "",
        ADMIN_NEWPASSWORD1: ""
      };
    },
    //修改密码
    passwordChanger() {
      let that = this;
      if (this.ADMIN_NEWPASSWORD == "" || this.ADMIN_NEWPASSWORD == "") {
        that.$notify.error({
          title: "失败",
          message: "密码或新密码不能为空"
        });
        return;
      }
      if (this.ADMIN_NEWPASSWORD1 != this.ADMIN_NEWPASSWORD) {
        that.$notify.error({
          title: "失败",
          message: "确认密码不一致"
        });
        return;
      }
      if (sessionStorage.getItem("userId")) {
        var model = {
          ADMIN_ID: sessionStorage.getItem("userId"),
          ADMIN_PASSWORD: this.form.ADMIN_PASSWORD,
          ADMIN_NEWPASSWORD: this.form.ADMIN_NEWPASSWORD
        };
        api.UserPasswordChange(that, model);
      }
    }
  },
  created() {   
    // console.log(this.$http.headers);   
    // this.$http.headers.common={
    //   'Authorization':'123'
    // };
    //  console.log(this.$http.headers);    
     
    var url = "";
    let that = this;
    //下拉菜单 赋值
    if (sessionStorage.getItem("userPower")) {
      var arry = menu.getMenu(sessionStorage.getItem("userPower").split(","));
      that.menuList = arry;
      url = arry[0].content[0].url;
    } else {
      that.menuList = menu.menuList;
      url = menu.menuList[0].content[0].url;
    }
    //active 样式
    ///如果是刷新 /有3个
    if (window.location.hash.split("/").length == 3) {
      url = window.location.hash;
      var urlarry = url.split("/");
      this.activeName = urlarry[urlarry.length - 1]; //
    } else {
      this.activeName = url;
      this.$router.replace({ name: url });
    }
    this.name = sessionStorage.getItem("userName");
    //监听 鼠标点击 隐藏 修改密码弹窗
    window.addEventListener("mouseup", function() {
      if (that.userinfo) {
        that.userinfo = !that.userinfo;
      }
    });
  }
};
</script>

<style >
.header {
  position: fixed;
  height: 100px;
  width: 100%;
  background: #00a0d2;
  color: #fff;
  z-index: 99;
}

.logoicon {
  font-size: 70px;
  position: relative;
  left: 30px;
  top: 20px;
}

.right-content {
  margin-bottom: 200px;
}

.mycontent {
  display: flex;
  max-height: 100%;
  min-height: 100%;
  padding-top: 100px !important;
  overflow: scroll;
}

.mycontent .content {
  overflow: scroll;
}

.nav {
  width: 10%;
  float: left;
  /*border-right: 1px solid #d1dbe5;
        height: 100%*/
}

.navcontent {
  width: 90%;
  float: left;
}

.usericon {
  font-size: 50px;
}

.userseticon {
  color: rgba(0, 0, 0, 0.3);
  text-align: right;
  font-size: 1.3rem;
}

.setlist {
  width: 200px;
  font-size: 1rem;
  color: black;
  position: absolute;
  background: #fff;
  right: 45px;
  top: 102px;
  z-index: 999;
  border: 1px solid #e1e6ef;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.125);
  -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.125);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.125);
}

.setlist div {
  height: 30px;
  line-height: 30px;
  border-bottom: 1px solid #e1e6ef;
}

.setlist div span {
  text-align: right;
  margin-left: 10px;
}

.setlist div i {
  float: right;
  padding-right: 10px;
}

.userset {
  position: absolute;
  right: 65px;
  top: 20px;
  text-align: center;
}

.footer {
  position: fixed;
  z-index: 999;
  bottom: 0;
  width: 100%;
  height: 70px;
  line-height: 70px;
  background: #00a0d2;
  text-align: center;
  color: #fff;
}

.el-submenu .el-menu-item {
  min-width: 100px !important;
}
</style>